<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../event.drag/jquery.event.drag.js" type="text/javascript"></script>
<title>jquery.event.drag</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css" media="screen">
.box {
	position: absolute;
	height: 98px;
	width: 98px;
	background: #CCF;
	border: 1px solid #AAD;
	}
.handle {
	cursor: move;
	}
.bar {
	background: #AAD;
	}
.active {
	background-color: #CFC;
	border-color: #ADA;
	}
.active .bar {
	background-color: #ADA;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	$('#dragdemo')
		.bind('drag', { handle:'.handle' }, function( ev, dd ){
			$( dd.proxy ).css({
				top: dd.offsetY,
				left: dd.offsetX
				});
			})
		.bind('dragstart',function(){
			return $( this ).css('opacity',.5)
				.clone().addClass('active')
				.insertAfter( this );
			})
		.bind('dragend',function( ev, dd ){
			$( dd.proxy ).remove();
			$( this ).animate({
				top: dd.offsetY,
				left: dd.offsetX,
				opacity: 1
				});
			});
	});
</script>

<h2>event.drag / proxy</h2>

<div class="box" id="dragdemo">
	<div class="handle bar">&nbsp;</div>
    </div>
    
</body></html>